import React from 'react';
import {
  Card,
  Button,
  Row,
  Col,
  Icon,
  Tabs,
  Table,
  Radio,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
  Input,
  Divider,
  message,
  Upload,
  Modal,
  List,
  Switch,
  notification,
  Avatar,
  Popconfirm,
  Cascader,
  InputNumber,
  Statistic,
  Tag
} from 'antd';

import { StyleSheet, css } from 'aphrodite';

import { swap } from 'react-magic';
import styles from './Sms.less';
import moment from 'moment/moment';
import { Link } from 'react-router-dom';
import { getValueWithLocalStorage } from '@/utils/authority';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const { MonthPicker, RangePicker } = DatePicker;
const { Meta } = Card;
const { Search, TextArea } = Input;
import dxzf from '../../assets/dxzf.png'

const styles_animation = StyleSheet.create({
  magic: {
    animationName: swap,
    animationDuration: '1s',
  },
});

import { connect } from 'dva';

const namespace = 'sms';

let userInfo = getValueWithLocalStorage('userinfo');

import router from 'umi/router';
import NumberInfo from "../../components/NumberInfo";

const mapStateToProps = state => {
  const historyList = state[namespace].historyList;
  const isLoading = state[namespace].isLoading;
  const total = state[namespace].total;


  return {
    historyList,
    isLoading,
    total,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getShopSmsHistory: (para) => {
      const action = {
        type: `${namespace}/getShopSmsHistory`,
        payload: {
          ...para,
          owner: userInfo.tel,
        },
      };
      dispatch(action);
    },
    updateSmsSendState: (para, callback) => {
      const action = {
        type: `${namespace}/updateSmsSendState`,
        payload: {
          ...para,
          callback: callback
        },
      };
      dispatch(action);
    },
  };
}

@connect(
  mapStateToProps,
  mapDispatchToProps
)
export default class History extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      page: '0',
      pagesize: '20',
      key: '',
      isneedsendsms:parseInt(userInfo.isneedsendsms) == 1
    };
  }

  /*****************************model's callback********************************/

  addCallback = res => {
    if (res.code == 0) {
      message.error(res.msg);
    } else {
      message.success(res.msg);
      router.push('/vip/servicesTemplate');
    }
  };

  componentDidMount = () => {
    this.props.getShopSmsHistory(this.state)
    userInfo = getValueWithLocalStorage('userinfo');
    this.setState({isneedsendsms:parseInt(userInfo.isneedsendsms) == 1
    })
  };


  reloadData= ()=>{
    this.props.getShopSmsHistory(this.state,function (err,doc) {
    })
  }

  render() {
    var that = this;

    //0app注册用户验证码 1小程序用户注册验证码 2.门店工单进度提示 3.保养到期 4.车险到期提示 5.会员卡充值 6添加套餐 7.活动营销

    const columns = [
      {
        title: '发送号码',
        dataIndex: 'tel',
        key: 'tel',
      },
      {
        title: '发送类型',
        dataIndex: 'smstype',
        key: 'smstype',
        render: (text, record) => (
            <div>
              {record.smstype == '0'?'注册用户验证码':
                (record.smstype == '1'?'小程序用户登录':
                  (record.smstype == '2'?'工单进度提示':
                    (record.smstype == '3'?'保养到期':
                      (record.smstype == '4'?'车险到期':
                        (record.smstype == '5'?'会员卡充值':
                          (record.smstype == '6'?'购买服务卡':
                          (record.smstype == '7'?'活动营销':
                            (record.smstype == '8'?'年审到期':'其它'
                        ))))))))}
            </div>
        )
      },
      {
        title: '发送内容',
        dataIndex: 'content',
        key: 'content',
      },
      {
        title: '发生时间',
        dataIndex: 'time',
        key: 'time',
      },
    ];

    var that = this;

    const leftNum = (
      <Card title='余量统计' bordered={true}>
        <Row gutter={16}>
          <Col span={12}>
            <Statistic  title="已发送总数" value={this.props.total} />
          </Col>
          <Col span={12}>
            <Statistic className={styles.num2} title="剩余总数" value={userInfo.smsnum} />
          </Col>
        </Row>
      </Card>
      );

    const sfbz = (
      <Card className={styles.card2} title='资费标准' bordered={true}>
        <Row gutter={6}>
          <Col span={6}>
            短信包规格(条)
          </Col>
          <Col span={6}>
            价格（元）
          </Col>
          <Col span={6}>
            单价（元）
          </Col>
        </Row>
        <Row gutter={6}>
          <Col span={6}>
            100
          </Col>
          <Col span={6}>
            8
          </Col>
          <Col span={6}>
            0.08
          </Col>
        </Row>
        <Row gutter={6}>
          <Col span={6}>
            1000
          </Col>
          <Col span={6}>
            70
          </Col>
          <Col span={6}>
           0.07
          </Col>
        </Row>
        <Row gutter={6}>
          <Col span={6}>
           10000
          </Col>
          <Col span={6}>
            600
          </Col>
          <Col span={6}>
            0.06
          </Col>
        </Row>

      </Card>
    );

    const tags = ['年审短信提醒', '商业险短信提醒', '交强险短信提醒', '提车后短信提醒','充值短信提醒','购买套餐卡短信提醒'].map(item=>{
      return (<Tag color="magenta">{item}</Tag>)
    });

    const updateSmsSendState = (
      <Card className={styles.card2} title='自动发送短信控制' bordered={true} >
        <Row gutter={6}>
          <Col span={4}>
            目前支持短信类型
          </Col>
          <Col span={20}>
            {tags}
          </Col>
        </Row>
        <Row className={styles.rom2} gutter={6}>
          <Col span={6}>
            是否自动发送短信
          </Col>
          <Col span={6}>
            <Switch checked={that.state.isneedsendsms}
                    onChange={value=>{
              that.setState({isneedsendsms:value})
                      that.props.updateSmsSendState({id:userInfo._id,isneedsendsms:value?'1':'0',tel:userInfo.tel,pwd:userInfo.pwd,type:'account'},(ret)=>{
                          message.success(ret.msg)
                      })
            }} />
          </Col>
        </Row>
      </Card>
    )

    const extraContent = (
      <div className={styles.extraContent}>
        <Search className={styles.extraContentSearch}
                placeholder="输入号码"
                enterButton
                all
                onSearch={(v,e)=>{
                  that.setState({key:v},()=>{
                    that.reloadData()
                  })
                }} />
        {/*<Link className={styles.addBtn} to={{ pathname: '/news/addCategory'}}>新增群发</Link>*/}
      </div>
    );
    return (
      <div>
        {leftNum}
        {updateSmsSendState}
        {sfbz}
      <Card className={styles.card2} title='短信发送记录' bordered={false}>
        {extraContent}
        <Table
          columns={columns}
          pagination={{
            current: Number(this.state.page) + 1,
            loading: this.props.isLoading,
            pageSize: Number(this.state.pagesize),
            showSizeChanger: true,
            showQuickJumper: true,
            pageSizeOptions: ['1', '5', '10', '20', '50'],
            total: this.props.total,
            onShowSizeChange: (current, size) => {
              that.setState({ pagesize: size, page: 0 }, () => {
                that.reloadData();
              });
            },
            onChange: (page, pageSize) => {
              that.setState({ page: page - 1 }, () => {
                that.reloadData();
              });
            },
            showTotal: total => `总计 ${this.props.total} 条`,
          }}
          dataSource={this.props.historyList}
        />
      </Card>
      </div>
    );
  }
}
